import React from 'react';
import { connect, ConnectProps, Link } from 'umi';
import { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';

export type SiderTheme = 'light' | 'dark';
export interface WebHeaderRightProps extends Partial<ConnectProps> {
    theme?: SiderTheme | 'realDark';
    layout: 'sidemenu' | 'topmenu';
}


const WebHeaderRight: React.SFC<WebHeaderRightProps> = (props) => {
    const { theme, layout } = props;
    let className = styles.right;

    if (theme === 'dark' && layout === 'topmenu') {
        className = `${styles.right}  ${styles.dark}`;
    }

    return (
        <div className={className}>
            <HeaderSearch
                className={`${styles.action} ${styles.search}`}
                placeholder="站内搜索"
                options={[]}
                onSearch={value => {
                    console.log(value)
                }}
            />
            <Link
                to="/welcome"
                rel="noopener noreferrer"
                className={styles.action}>
                管理后台
                </Link>
            <Avatar />
        </div>
    );
};

export default connect(({ settings }: ConnectState) => ({
    theme: settings.navTheme,
    layout: settings.layout,
}))(WebHeaderRight);
